<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂完整的成绩表</title>
    <style>
        table {
           border-collapse: collapse;
        
        }
        table tr:nth-child(2n){
            background-color: bisque;
        }
        table tr:nth-child(2n+1){
            background-color: #76a78f;
        }
        table td{
             border: 1px solid black;
        }
        
        th{
            border: 1px solid black;
        }

        .code-display{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #3a3f40;
            margin-top: 50px;
            color: white;
            
        }
        pre{
            
            width: 300px;
            margin-top: 0;
            background-color: #3a3f40;
            color: white;
            display: none;
        }
        .code-display:hover pre{
            display: block;
        }
    </style>
</head>
<body>
    
    <div>
        <font style="text-align: center; font-size: 20pt;">
        复杂完整的成绩表
        </font>
        <table cellpadding="0">
            <tr>
                <th rowspan="2">姓名</th>
                <th colspan="2">通识课</th>
                <th colspan="3">专业课</th>
                <th rowspan="2">总分</th>
            </tr>

            <tr>
                <th>英语</th>
                <th>高数</th>
                <th>UI设计</th>
                <th>网页设计</th>
                <th>程序设计</th>
            </tr>

            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>

            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>

            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>

            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>

            <tr>
                <th>平均</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
        </table>
    </div>
    
     <div class="code-display">
        关键代码
        <pre>
            table {
                border-collapse: collapse;
             
             }
             table tr:nth-child(2n){
                 background-color: bisque;
             }
             table tr:nth-child(2n+1){
                 background-color: #76a78f;
             }
             table td{
                  border: 1px solid black;
             }
             
             th{
                 border: 1px solid black;
             }
        </pre>
    </div>
</body>
</html>